<template>
    <div :class="isView ? 'view_box' : 'data_box'">
        <el-row class="boxRow" :class="isView ? '' : 'clear'">
            <el-col class="boxMain">
                <div v-if="isSet">
                    <div class="configured" v-if="configured.includes(1)" @click="setDeploy(1)">已配置</div>
                    <div :class="isView ? 'view_deploy' : 'data_deploy'" v-else>
                        <el-button type="primary" size="small" v-if="!isView && !isInitial || isView"
                            @click="setDeploy(1)">配置</el-button>
                    </div>
                </div>
                <div class="tab" :class="isView ? 'h-80' : 'h-100'">
                    <div id="device-status" class="my_chart"></div>
                    <div>
                        <div class="tab_title">当前设备状态</div>
                        <div class="text-warning">异常</div>
                    </div>
                </div>
                <div class="box_info" v-if="isView">
                    <div class="tab_title">{{ info.title }} </div>
                    <span>设备编号：{{ info.id }}</span>
                    <span>设备地址：{{ info.address }}</span>
                </div>
            </el-col>
            <el-col class="boxMain">
                <div v-if="isSet">
                    <div class="configured" v-if="configured.includes(2)" @click="setDeploy(2)">已配置</div>
                    <div :class="isView ? 'view_deploy' : 'data_deploy'" v-else>
                        <el-button type="primary" size="small" v-if="!isView && !isInitial || isView"
                            @click="setDeploy(2)">配置</el-button>
                    </div>
                </div>
                <div class="tab" :class="isView ? 'h-80' : 'h-100'">
                    <div id="device-power" class="my_chart"></div>
                    <div>
                        <div class="tab_title">当前设备功率</div>
                        <div class="text-warning">300KW</div>
                    </div>
                </div>
                <div class="box_info" v-if="isView">
                    <div class="tab_title">{{ info.title }} </div>
                    <span>设备编号：{{ info.id }}</span>
                    <span>设备地址：{{ info.address }}</span>
                </div>
            </el-col>
            <el-col class="boxMain">
                <div v-if="isSet">
                    <div class="configured" v-if="configured.includes(3)" @click="setDeploy(3)">已配置</div>
                    <div :class="isView ? 'view_deploy' : 'data_deploy'" v-else>
                        <el-button type="primary" size="small" v-if="!isView && !isInitial || isView"
                            @click="setDeploy(3)">配置</el-button>
                    </div>
                </div>
                <div class="tab" :class="isView ? 'h-80' : 'h-100'">
                    <div id="device-current" class="my_chart"></div>
                    <div>
                        <div class="tab_title">当前设备电流</div>
                        <div class="text-warning" style="color: #5470c6;">200A</div>
                    </div>
                </div>
                <div class="box_info" v-if="isView">
                    <div class="tab_title">{{ info.title }} </div>
                    <span>设备编号：{{ info.id }}</span>
                    <span>设备地址：{{ info.address }}</span>
                </div>
            </el-col>
            <el-col class="boxMain">
                <div v-if="isSet">
                    <div class="configured" v-if="configured.includes(4)" @click="setDeploy(4)">已配置</div>
                    <div :class="isView ? 'view_deploy' : 'data_deploy'" v-else>
                        <el-button type="primary" size="small" v-if="!isView && !isInitial || isView"
                            @click="setDeploy(4)">配置</el-button>
                    </div>
                </div>
                <div class="tab" :class="isView ? 'h-80' : 'h-100'">
                    <div id="device-voltage" class="my_chart"></div>
                    <div>
                        <div class="tab_title">当前设备电压</div>
                        <div class="text-warning">41.2℃</div>
                    </div>
                </div>
                <div class="box_info" v-if="isView">
                    <div class="tab_title">{{ info.title }} </div>
                    <span>设备编号：{{ info.id }}</span>
                    <span>设备地址：{{ info.address }}</span>
                </div>
            </el-col>
            <el-col class="boxMain lastLine" v-if="isView">
                <div v-if="isSet">
                    <div class="configured" v-if="configured.includes(5)" @click="setDeploy(5)">已配置</div>
                    <div :class="isView ? 'view_deploy' : 'data_deploy'" v-else>
                        <el-button type="primary" size="small" v-if="!isView && !isInitial || isView"
                            @click="setDeploy(5)">配置</el-button>
                    </div>
                </div>
                <div class="tab" :class="isView ? 'h-80' : 'h-100'">
                    <div id="device-tension" class="my_chart"></div>
                    <div>
                        <div class="tab_title">当前设备电压</div>
                        <div class="text">A相电压：<span style="color: #203add;">49.5</span></div>
                        <div class="text">B相电压：<span style="color: #ffa500;">29.5</span></div>
                        <div class="text">C相电压：<span style="color: #91cc75;">68.8</span></div>
                    </div>
                </div>
                <div class="box_info" v-if="isView">
                    <div class="tab_title">{{ info.title }} </div>
                    <span>设备编号：{{ info.id }}</span>
                    <span>设备地址：{{ info.address }}</span>
                </div>
            </el-col>
            <el-col class="boxMain lastLine" v-else>
                <div v-if="isSet">
                    <div class="configured" v-if="configured.includes(5)" @click="setDeploy(5)">已配置</div>
                    <div :class="isView ? 'view_deploy' : 'data_deploy'" v-else>
                        <el-button type="primary" size="small" v-if="!isView && !isInitial || isView"
                            @click="setDeploy(5)">配置</el-button>
                    </div>
                </div>
                <div class="tab" :class="isView ? 'h-80' : 'h-100'">
                    <div class="my_chart">
                        <img src="../../assets/img/panel.png" alt="" class="my_img">
                    </div>
                    <div class="center">
                        <el-switch v-model="value" active-color="#9075ff" inactive-color="#ff4949">
                        </el-switch>
                        <div class="tab_title mt-2 text-switch">设备已开启</div>
                    </div>
                </div>
                <div class="box_info" v-if="isView">
                    <div class="tab_title">{{ info.title }} </div>
                    <span>设备编号：{{ info.id }}</span>
                    <span>设备地址：{{ info.address }}</span>
                </div>
            </el-col>
        </el-row>
        <deployDialog ref="deployDialog" @onSave="refresh"></deployDialog>
    </div>
</template>

<script>
import * as echarts from 'echarts'
import charts from './chart.js'
import deployDialog from '@/views/newSystem/settingManagement/projectView/dialog/deployDialog.vue'
export default {
    components: {
        deployDialog,
    },
    props: {
        isView: { //是否显示信息
            type: Boolean,
            default: () => true
        },
        isSet: { //是否可配置数据
            type: Boolean,
            default: () => false
        },
        isInitial: {
            // 是否数据看板初始化
            type: Boolean,
            default: () => false
        },
        configured: {
            // 已配置
            type: Array,
            default: () => []
        },
    },
    data() {
        return {
            value: true,
            mouseNum: 0,
            statusVal: 40,
            powerVal: 300,
            voltageVal: 41.2,
            tensionVal: null,
            info: {
                title: 'S001断路器',
                id: 'DEV98023781',
                address: 'A区1栋五层505',
            },
            setNum: 0,
        }
    },
    created() {
    },
    mounted() {
        this.getStatus()
        this.getPower()
        this.getVoltage()
        this.getTension()
        this.getCurrent()
    },
    methods: {
        getStatus() {
            // charts.statusEchart(this.statusVal)
            charts.statusEcharts(this.statusVal)
        },
        getPower() {
            charts.powerEchart(this.powerVal)
        },
        getVoltage() {
            charts.voltageEchart(this.voltageVal)
        },
        getTension() {
            if (this.isView) charts.tensionEchart(this.tensionVal)
        },
        getCurrent() {
            // charts.currentEchart()
            charts.currentEcharts()
        },
        setDeploy(num) {
            this.setNum = num
            this.$refs.deployDialog.isView = true
            this.$refs.deployDialog.dialogVisible = true
        },
        refresh(id) {
            this.configured.push(this.setNum)
        }
    }
}
</script>

<style lang="scss" scoped>
.view_box {
    height: 26%;
}

.data_box {
    height: 22%;
}

.boxRow {
    display: flex;
    width: 100%;
    height: 100%;
    padding: 20px 10px 10px 10px;
}

.clear {
    padding: 0 !important;
    cursor: pointer;
}

.boxMain {
    display: flex;
    flex-direction: column;
    border-radius: 4px;
    margin-right: 20px;
    background-color: #fff;
    width: calc((100% - 80px)/5);
    height: 100%;
    border: 1px solid #EBEEF5;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    padding: 8px 0;
    position: relative;
}

.lastLine {
    margin-right: 0 !important;
}

.my_chart {
    // height: 160px;
    // width: 200px;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 60%;
    height: 100%;
    text-align: center;
}

.my_img {
    width: 78%;
    height: 92%;
}

.tab {
    display: flex;
    align-items: center;
    width: 100%;
}

.h-100 {
    height: 100%;
}

.h-80 {
    height: 80%;
}

.tab_title {
    font-size: 16px;
    font-weight: 400;
    text-align: center;
}

.text-warning {
    color: #ff9933;
    text-align: center;
    margin-top: 10px;
}

.box_info {
    display: flex;
    flex-wrap: wrap;
    padding: 0 12px;

    span {
        color: #9a9a9a;
        margin-right: 10px;
        margin-bottom: 10px;
    }

    .tab_title {
        font-size: 16px;
        font-weight: 400;
        margin-bottom: 10px;
        margin-right: 10px;
    }
}

.text {
    color: #666666;
}

.data_deploy {
    position: absolute;
    top: -10px;
    width: 100%;
    height: calc(100% + 10px);
    z-index: 199;
    opacity: 0.9;
    background-color: #b2b2b2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.view_deploy {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 199;
    opacity: 0.9;
    background-color: #b2b2b2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.center {
    text-align: center;
}

.mt-2 {
    margin-top: 8px;
}

.text-switch {
    color: #9075ff;
}

.configured {
    text-align: right;
    margin-right: 8px;
    color: #3276ff;
    cursor: pointer;
}
</style>